<template lang="pug">
div(:class="containerClass", ref="panel", @mousewheel.stop="onScroll", 
	@touchstart="touchstart", @touchmove="touchmove", @touchend="touchend")
	slot
	p(style="text-align:center", ref="loading-area", :class="{'loading-area':true, active: loading || completed}")
		template(v-if="loading")
			i(class="el-icon-loading")
			span() 加载中...
		template(v-if="completed")
			span() 已全部加载
</template>

<script>
export default {
	name: 'paged-panel',
	props:{
		/**
		 * 高度，默认是跟屏幕大小一致
		 */
		height: {type: String, default: "100vh"},
		/**
		 * 默认挂载时，触发scroll-bootm事件
		 */
		'init-loading': {type: Boolean, default: true},
		/**
		 * 管理page分页对象
		 */
		page:{type: Object, default(){return {maxResultCount: 20, skipCount: 0}}},

		/**
		 * 数据全部加载完成
		 */
		completed: {type: Boolean, default: false},
		/**
		 * 自定义属性
		 */
		'i-class': {type: String, default: null},
	},
	model:{event: 'update', prop: 'page'},
	computed: {
		containerClass(){
			const classes = {'paged-panel': true};
			if(this.iClass) classes[this.iClass] = true;
			return classes
		}
	},
	data(){
		return{
			loading: false,
			lastScropTop: 0
		}
	},
	methods:{
		onScroll(){
			const currentScropTop = this.$refs.panel.scrollTop;
			if(this.lastScropTop === currentScropTop) return; // 滚轮换方向，不需要触发事件
			this.lastScropTop  = currentScropTop;
			if(this.completed) return;

			if(this.loading) return; // 执行查询中，不能再触发事件

			if(this.is_scroll_bottom()){
				this.page.skipCount = this.page.skipCount + this.page.maxResultCount;
				this.eventBusiness();
			}
		},
		eventBusiness(){
				this.$emit('scroll-bottom', this.resolve); // 到底部触发滚动到底部事假
				this.loading = true;
		},
		resolve(){
			this.loading=false;
		},
		/** 是否滚动到底部 */
		is_scroll_bottom(){
			return this.$refs.panel.scrollTop ==  this.$refs.panel.scrollHeight - this.$refs.panel.offsetHeight;
		},
		touchstart(){

		},
		touchmove(){
			this.onScroll();
		},
		touchend(){}
	},
	mounted(){
		if(this.initLoading) this.eventBusiness();
	}
}
</script>

<style lang="less" scoped>
.paged-panel{
	overflow-y: scroll;
	overflow-x: hidden;

.loading-area{
	visibility: hidden;

	&.active{
		visibility: visible;
	}
}
	
}
</style>
